<template>
	<view class="start-container">
		<swiper class="swiper_box" @change="swiperchange" indicator-dots="true" indicator-active-color="#fff">
		  <swiper-item v-for="(banner, ind) of banners" :key="ind">
		    <image mode="aspectFill" @click="imgClick" :src="banner.url" />
		  </swiper-item>
		</swiper>
		<view class="btn">
			<navigator v-if="swiperCurrent + 1 == swiperMaxNumber" url="/pages/index/index" open-type="switchTab">
				<button type="primary" @click="goToIndex">进入</button>
			</navigator>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { projectConfig } from "../../config/index";
import { searchBanner } from "../../service/index";
import { createToastComp } from "../../utils/comp";

const banners = ref([]);
const swiperMaxNumber = ref(0);
const swiperCurrent = ref(0);

const swiperchange = (e: any) => {
	swiperCurrent.value = e.detail.current;
}

const imgClick = () => {
	if (swiperCurrent.value + 1 != swiperMaxNumber.value) {
		createToastComp({ title: "左滑进入" }, "none");
	}
}

const goToIndex = (e: any) => {
	uni.switchTab({
		url: '/pages/index/index',
	});
}

const getBannerList = () => {
	const projectName = uni.getStorageSync('projectName')
	uni.setNavigationBarTitle({
		title: projectName
	});
	// 展示启动页
	searchBanner({}).then((res: any) => {
		if (res.status === "success") {
			banners.value = res?.data?.list || [],
			swiperMaxNumber.value = res.data?.list?.length || 0
		}
	}).catch(function (e) {
		createToastComp({ title: e }, "none");
	})
};

onMounted(() => {
	if (uni.getStorageSync("version") === projectConfig.version) {
		uni.switchTab({
			url: '/pages/index/index',
		});
		return;
	}
	getBannerList();
});
</script>

<style lang="less">
	.start-container, swiper, swiper-item, image {
	  width: 100vw;
	  height: 100vh;
	}
	.btn {  
	  position: absolute;  
	  left: 0;  
	  right: 0;  
	  bottom: 100rpx;
	  display: flex;  
	  justify-content: center;
	  align-items: center;
	  height: 80rpx;
	}
</style>
